import {toJS} from 'mobx';
import {Row} from 'antd';
import View from "../base/View";
import defaultData from "./data";
import AddressStore from "./Store";
import {observer} from 'mobx-react';
import React, {Fragment} from "react";
import { WeaInput, WeaSelect, WeaLocaleProvider } from "ecCom";
import {CHECKED} from "../../../../../constants/common";
import {modeTypes} from '../../../../../constants/form';
import './View.less';

const formatMultiLang = WeaLocaleProvider.formatMultiLang;

@observer
export default class AddressView extends View {
  store = new AddressStore();
  state = {
    time: '' // work around 触发组件刷新， 修复init之后选择项列表未刷新的问题
  };

  componentDidMount() {
    const { data } = this.props;

    this.store.init(data, () => {
      this.setState({ time: new Date().getTime() })
    });
  }

  onValueChange(type) {
    return value => {
      const { data, onChange } = this.props;

      // 移动端
      if(value.target) {
        value = value.target.value;
      }

      this.store.onValueChange(type, value);
      onChange(data[type].uuid, value);

      switch(type) {
        case "province":
          onChange(data.city.uuid, '');
        case "city":
          onChange(data.district.uuid, '');
      }
    };
  }

  renderForPC(data) {
    const { modeType } = this.props;
    const { province, city, district, detail, placeholder } = data;
    const isDesign = modeTypes.DESIGN === modeType;
    const {
      province: provinceVal, city: cityVal, district: districtVal, detail: detailVal,
      provinceOpts, cityOpts, districtOpts
    } = this.store;

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@98nky8`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xqun7g`} className='wea-edc-table-layout'>
          {CHECKED === province.required &&
            <div data-id={province.uuid}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@8740ol`}
                key={`${province.uuid}`}
                className='wea-edc-form-field'
                value={isDesign ? province.value : provinceVal}
                options={toJS(provinceOpts)}
                onChange={this.onValueChange('province')}
              />
            </div>
          }
          {CHECKED === city.required &&
            <div data-id={city.uuid}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@qy732o`}
                key={`${city.uuid}`}
                value={isDesign ? city.value : cityVal}
                options={toJS(cityOpts)}
                onChange={this.onValueChange('city')}
              />
            </div>
          }
          {CHECKED === district.required &&
            <div data-id={district.uuid}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1me5gx`}
                key={`${district.uuid}`}
                value={isDesign ? district.value : districtVal}
                options={toJS(districtOpts)}
                onChange={this.onValueChange('district')}
              />
            </div>
          }
        </Row>
        {CHECKED === detail.required &&
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u5brjd`} className='wea-edc-table-layout' style={{ marginTop: 5 }}>
            <div data-id={detail.uuid} >
              <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@6fpc29`}
                key={`${detail.uuid}`}
                value={isDesign ? detail.value : detailVal}
                onChange={this.onValueChange('detail')}
                placeholder={formatMultiLang(placeholder)}
              />
            </div>
          </Row>
        }
      </Fragment>
    );
  }

  renderOpts(options, select) {
    const setSelected = (opts, sel) => {
      if (opts && sel && sel.value) {
        const find = opts.find(opt => opt.showname === sel.value);
        if (find) {
          opts.forEach(opt => opt.selected = false);
          find.selected = true;
        }
      }
    };
    setSelected(options, select);

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@hggeia`}>
        {options.map(opt => (
          <option key={opt.key} selected={opt.selected} value={opt.key} >
            {opt.showname}
          </option>
        ))}
      </Fragment>
    );
  }

  renderForMobile(data) {
    const { province, city, district, detail, placeholder } = data;
    const {
      detail: detailVal,
      provinceOpts, cityOpts, districtOpts
    } = this.store;

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@hvjaft`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jy2ep4`} className='wea-edc-table-layout'>
          {CHECKED === province.required &&
            <div className='wea-edc-select-container' data-id={province.uuid}>
              <select onChange={this.onValueChange('province')}>
                {this.renderOpts(provinceOpts, province)}
              </select>
            </div>
          }
          {CHECKED === city.required &&
            <div className='wea-edc-select-container' data-id={city.uuid}>
              <select onChange={this.onValueChange('city')}>
                {this.renderOpts(cityOpts, city)}
              </select>
            </div>
          }
        </Row>
        {CHECKED === district.required &&
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u7me25`} className='wea-edc-table-layout' style={{ marginTop: 5 }}>
            <div className='wea-edc-select-container' data-id={district.uuid} >
              <select onChange={this.onValueChange('district')}>
                {this.renderOpts(districtOpts, district)}
              </select>
            </div>

          </Row>
        }
        {CHECKED === detail.required &&
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ol909o`} className='wea-edc-table-layout' style={{ marginTop: 5 }}>
            <div data-id={detail.uuid}>
              <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@1tjtr5`}
                className='wea-edc-form-field'
                value={detailVal}
                onChange={this.onValueChange('detail')}
                placeholder={formatMultiLang(placeholder)}
              />
            </div>
          </Row>
        }
      </Fragment>
    )
  }
}

AddressView.defaultProps = {
  ...View.defaultProps,
  data: defaultData,
  value: ''
};